<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025年11月-12月日历（全运会限行标识）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 15px 10px;
            min-height: 100vh;
        }

        .container {
            max-width: 420px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            color: white;
            margin-bottom: 12px;
            font-size: 1.4em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .subtitle {
            text-align: center;
            color: white;
            margin-bottom: 15px;
            font-size: 0.85em;
            line-height: 1.4;
        }

        .legend {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 15px;
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.75em;
        }

        .legend-badge {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7em;
            font-weight: bold;
            color: white;
            flex-shrink: 0;
        }

        .legend-badge.odd {
            background: #e74c3c;
        }

        .legend-badge.even {
            background: #3498db;
        }

        .legend-badge.all {
            background: #27ae60;
        }

        .calendars {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .calendar {
            background: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }

        .calendar-header {
            text-align: center;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }

        .calendar-header h2 {
            color: #667eea;
            font-size: 1.3em;
        }

        .weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 3px;
            margin-bottom: 8px;
        }

        .weekday {
            text-align: center;
            font-weight: bold;
            color: #667eea;
            padding: 6px 0;
            font-size: 0.75em;
        }

        .weekday.weekend {
            color: #e74c3c;
        }

        .days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 3px;
        }

        .day {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.85em;
            position: relative;
            padding: 3px;
            -webkit-tap-highlight-color: transparent;
        }

        .day.empty {
            cursor: default;
        }

        .day.active {
            background: #f0f0f0;
            font-weight: 500;
        }

        .day.active:active {
            background: #667eea;
            color: white;
            transform: scale(0.95);
        }

        .day.active:active .traffic-badge {
            background: white;
            color: #667eea;
        }

        .day.weekend {
            color: #e74c3c;
        }

        .day.today {
            background: #667eea;
            color: white;
            font-weight: bold;
            box-shadow: 0 0 0 1px #fff, 0 0 0 2px #667eea;
            position: relative;
            z-index: 1;
        }

        .day.today::before {
            content: '今天';
            position: absolute;
            top: 1px;
            left: 1px;
            font-size: 0.45em;
            background: #ffeb3b;
            color: #333;
            padding: 0px 2px;
            border-radius: 3px;
            font-weight: bold;
            line-height: 1.2;
        }

        .day.today .traffic-badge {
            background: white;
            color: #667eea;
        }

        .day-number {
            font-size: 1em;
            margin-bottom: 1px;
        }

        .traffic-badge {
            font-size: 0.65em;
            font-weight: bold;
            padding: 1px 4px;
            border-radius: 8px;
            color: white;
            min-width: 22px;
            text-align: center;
        }

        .traffic-badge.odd {
            background: #e74c3c;
        }

        .traffic-badge.even {
            background: #3498db;
        }

        .traffic-badge.all {
            background: #27ae60;
        }

        /* 开幕式特殊标识 */
        .day.opening {
            position: relative;
        }

        .day.opening::after {
            content: '⭐';
            position: absolute;
            top: 2px;
            right: 2px;
            font-size: 0.6em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📅 2025年广州全运会限行日历</h1>
        <div class="subtitle">
            限行期间：11月6日-20日 & 12月5日-14日<br>
            ⏰ 限行时间：每日 7:30-19:30<br>
            <span style="color: #ffeb3b;">⭐ 11/9、12/8开幕式延长至24:00</span>
        </div>
        
        <div class="legend">
            <div class="legend-item">
                <span class="legend-badge odd">单</span>
                <span>单号车辆通行（奇数日期）</span>
            </div>
            <div class="legend-item">
                <span class="legend-badge even">双</span>
                <span>双号车辆通行（偶数日期）</span>
            </div>
        </div>

        <div class="calendars">
            <div class="calendar">
                <div class="calendar-header">
                    <h2>2025年11月</h2>
                </div>
                <div class="weekdays">
                    <div class="weekday">日</div>
                    <div class="weekday">一</div>
                    <div class="weekday">二</div>
                    <div class="weekday">三</div>
                    <div class="weekday">四</div>
                    <div class="weekday">五</div>
                    <div class="weekday weekend">六</div>
                </div>
                <div class="days" id="november"></div>
            </div>

            <div class="calendar">
                <div class="calendar-header">
                    <h2>2025年12月</h2>
                </div>
                <div class="weekdays">
                    <div class="weekday">日</div>
                    <div class="weekday">一</div>
                    <div class="weekday">二</div>
                    <div class="weekday">三</div>
                    <div class="weekday">四</div>
                    <div class="weekday">五</div>
                    <div class="weekday weekend">六</div>
                </div>
                <div class="days" id="december"></div>
            </div>
        </div>
    </div>

    <script>
        // 限行日期范围
        const restrictionPeriods = [
            { start: new Date(2025, 10, 6), end: new Date(2025, 10, 20) },  // 11月6-20日
            { start: new Date(2025, 11, 5), end: new Date(2025, 11, 14) }   // 12月5-14日
        ];

        // 开幕式日期（限行延长至24:00）
        const openingDays = [
            { year: 2025, month: 11, day: 9 },   // 11月9日
            { year: 2025, month: 12, day: 8 }    // 12月8日
        ];

        // 判断是否为开幕式日期
        function isOpeningDay(year, month, day) {
            return openingDays.some(od => 
                od.year === year && od.month === month && od.day === day
            );
        }

        // 获取限行时间说明
        function getRestrictionTime(year, month, day) {
            if (isOpeningDay(year, month, day)) {
                return '7:30-24:00（开幕式）';
            }
            return '7:30-19:30';
        }

        // 判断是否在限行期间
        function isInRestrictionPeriod(year, month, day) {
            const date = new Date(year, month - 1, day);
            return restrictionPeriods.some(period => 
                date >= period.start && date <= period.end
            );
        }

        // 获取限行标识
        function getTrafficLabel(year, month, day) {
            if (isInRestrictionPeriod(year, month, day)) {
                // 在限行期间，奇数日为"单"，偶数日为"双"
                return day % 2 === 1 ? { text: '单', type: 'odd' } : { text: '双', type: 'even' };
            } else {
                // 不在限行期间，不显示标识
                return null;
            }
        }

        // 生成日历
        function generateCalendar(year, month, containerId) {
            const container = document.getElementById(containerId);
            const firstDay = new Date(year, month - 1, 1).getDay();
            const daysInMonth = new Date(year, month, 0).getDate();
            
            // 获取今天的日期
            const today = new Date();
            const isCurrentMonth = today.getFullYear() === year && today.getMonth() === month - 1;
            const currentDay = today.getDate();

            // 添加空白天数
            for (let i = 0; i < firstDay; i++) {
                const emptyDay = document.createElement('div');
                emptyDay.className = 'day empty';
                container.appendChild(emptyDay);
            }

            // 添加月份的所有天数
            for (let day = 1; day <= daysInMonth; day++) {
                const dayElement = document.createElement('div');
                const dayOfWeek = (firstDay + day - 1) % 7;
                
                dayElement.className = 'day active';
                
                // 周末标记
                if (dayOfWeek === 0 || dayOfWeek === 6) {
                    dayElement.classList.add('weekend');
                }
                
                // 今天标记
                if (isCurrentMonth && day === currentDay) {
                    dayElement.classList.add('today');
                }
                
                // 开幕式日期标记
                if (isOpeningDay(year, month, day)) {
                    dayElement.classList.add('opening');
                }
                
                // 创建日期数字
                const dayNumber = document.createElement('div');
                dayNumber.className = 'day-number';
                dayNumber.textContent = day;
                dayElement.appendChild(dayNumber);
                
                // 获取限行标识
                const trafficLabel = getTrafficLabel(year, month, day);
                if (trafficLabel) {
                    const badge = document.createElement('div');
                    badge.className = `traffic-badge ${trafficLabel.type}`;
                    badge.textContent = trafficLabel.text;
                    dayElement.appendChild(badge);
                }
                
                // 点击事件
                dayElement.addEventListener('click', function() {
                    const inRestriction = isInRestrictionPeriod(year, month, day);
                    const restrictionTime = getRestrictionTime(year, month, day);
                    let message = `${year}年${month}月${day}日\n\n`;
                    
                    if (inRestriction) {
                        message += `⏰ 限行时间：${restrictionTime}\n\n`;
                        if (day % 2 === 1) {
                            message += '🚗 限行规则：仅单号车辆可通行\n（车牌尾号：1、3、5、7、9）';
                        } else {
                            message += '🚗 限行规则：仅双号车辆可通行\n（车牌尾号：0、2、4、6、8）';
                        }
                        
                        if (isOpeningDay(year, month, day)) {
                            message += '\n\n⭐ 开幕式当天，限行延长至午夜24:00';
                        }
                    } else {
                        message += '✅ 非限行日：全部车辆可通行';
                    }
                    alert(message);
                });
                
                container.appendChild(dayElement);
            }
        }

        // 生成2025年11月和12月的日历
        generateCalendar(2025, 11, 'november');
        generateCalendar(2025, 12, 'december');
    </script>
</body>
</html>